<template>
    <nly-content-wrapper style="overflow-x:hidden;">
        <nly-content-header>
            <section>
                <div class="big-main-wrapper" style="border-bottom:0px;margin:0px;">
                    <div class="btn-wrapper clearfix">
                        <a-row class="text-center clearfix">
                            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <a-col v-if="permissions.includes('office:add')" :span="2">
                                    <div class="btns" @click="AddOffice">
                                        <a-icon class="btns-icon" type="file-add" />
                                        <div class="btns-text" title="添加">添加</div>
                                    </div>
                                </a-col>
                                <a-col v-if="permissions.includes('office:edit')" :span="2">
                                    <div class="btns" @click="showModal">
                                        <a-icon class="btns-icon" type="edit" />
                                        <div class="btns-text" title="修改">修改</div>
                                    </div>
                                </a-col>
                                <a-col v-if="permissions.includes('office:delete')" :span="2">
                                    <div class="btns" @click="deleteOffice">
                                        <a-icon class="btns-icon" type="delete" />
                                        <div class="btns-text" title="删除">删除</div>
                                    </div>
                                </a-col>

                            </a-col>
                        </a-row>
                    </div>
                </div>
            </section>
            <!-- <nly-container fluid></nly-container>
            <nly-button-group style="float:right;display:initial;margin-right:20px;" v-if="permissions.includes('office:add')">
                <a-button type="primary" class="crm-btn" @click="AddOffice" button-class="mr-2">添加部门</a-button>
            </nly-button-group> -->
        </nly-content-header>
        <!-- <div class="tabpanel_tab_spacer" style="margin-bottom:0"></div> -->
        <!-- 左边部门数 -->
        <div style="height:100%;margin:0 0.5rem;border:1px solid #ccc;border-top:none">
            <div style="float: left;margin-right:5px;width: 200px;border-right:1px solid #ccc;height:100%;padding-top:10px;">
                <a-input-search style="margin-bottom: 8px" placeholder="部门名称" @change="onLeftTreeChange" />
                <a-tree :expanded-keys="leftExpandedOfficeKeys" :tree-data="leftOfficeTreeData" @expand="onLeftTreeExpand" @select="onLeftTreeSelect" :show-line="true" />
            </div>
            <div style="padding-top:10px;">
                <a-table :columns="columns" :data-source="data" bordered :expandedRowKeys="tableExplandKey" :row-selection="rowSelection" :pagination="false" :scroll="{ x: 1000, y: 500}">
                </a-table>
            </div>
        </div>
        <nly-content style="margin-left: 200px;float: right;">

            <!-- 列表 -->
            <!-- <a-table :columns="columns" :data-source="data" bordered  :expandedRowKeys="tableExplandKey" :pagination="false" :scroll="{ x: 1000, y: 500}">
      </a-table> -->
            <!-- modal 弹窗  -->
            <a-modal v-model="editModal" centered :title="editItem.id ? '编辑部门' : '新增部门'" width="900px" class="office-wrapper">
                <div id="components-form-demo-advanced-search">
                    <a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 24 }" @submit="handleSubmit">
                        <div class="line" style="color:#1980Ff;font-size:15px;">基本信息</div>
                        <a-row :gutter="24">
                            <a-col :span="10" key="1">
                                <a-form-item :label="upParentLabel" :validate-status="validateStatus" :help="errorMsg">
                                    <a-input-search v-model="parentName" placeholder="请选择上级部门" @click="selectOffice" @search="selectOffice" read-only />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10" key="2">
                                <a-form-item label="部门编码">
                                    <a-input v-decorator="['officeCode', { rules: [{ required: true, message: '部门编码不能为空' }] }]" placeholder="请输入部门编码" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" key="3" :push="2">
                                <a-form-item label="编码规则">
                                    ** ** ** **
                                </a-form-item>
                            </a-col>

                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10" key="2">
                                <a-form-item label="部门名称">
                                    <a-input v-decorator="['officeName', { rules: [{ required: true, message: '部门名称不能为空' }] }]" @blur="officeNameChange" placeholder="请输入部门名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" key="3" :push="2">
                                <a-form-item label="部门全称">
                                    <a-input v-decorator="['fullName', { rules: [{ required: true, message: '部门全称不能为空' }] }]" placeholder="请输入部门全称" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <!-- <a-col :span="10" key="4">
                                <a-form-item label="部门类型">
                                    <a-select v-decorator="['officeType', { rules: [{ required: true, message: '部门类型不能为空' }] }]" placeholder="请选择部门类型">
                                        <a-select-option value="1">省级公司</a-select-option>
                                        <a-select-option value="2">市级公司</a-select-option>
                                        <a-select-option value="3">部门</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col> -->
                            <a-col :span="10" key="5">
                                <a-form-item label="排序号">
                                    <a-input v-decorator="['treeSort', { rules: [{ required: false, message: '排序号不能为空' }] }]" placeholder="据排序号从小到大排序" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div class="line" style="color:#1980Ff;font-size:15px;">详细信息</div>
                        <a-row :gutter="24">
                            <a-col :span="10" key="6">
                                <a-form-item label="负责人">
                                    <a-input v-decorator="['leader', { rules: [{ required: false, message: '负责人不能为空' }] }]" placeholder="请输入负责人" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" key="7" :push="2">
                                <a-form-item label="办公电话">
                                    <a-input v-decorator="['phone', { rules: [{ required: false, message: '办公电话不能为空' }] }]" placeholder="请输入办公电话" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10" key="8">
                                <a-form-item label="联系地址">
                                    <a-input v-decorator="['address', { rules: [{ required: false, message: '联系地址不能为空' }] }]" placeholder="请输入联系地址" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" key="9" :push="2">
                                <a-form-item label="邮政编码">
                                    <a-input v-decorator="['zipCode', { rules: [{ required: false, message: '邮政编码不能为空' }] }]" placeholder="请输入邮政编码" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10" key="10">
                                <a-form-item label="电子邮箱">
                                    <a-input v-decorator="['email', { rules: [{ required: false, message: '电子邮箱不能为空' }] }]" placeholder="请输入电子邮箱" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="22" :pull="3" key="11">
                                <a-form-item label="备注">
                                    <a-textarea placeholder="请输入备注" :rows="5" v-decorator="['remarks', { rules: [{ required: false, message: '' }] }]" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <template slot="footer">
                    <a-button type="primary" html-type="submit" @click="handleSubmit" v-if="permissions.includes('office:save')">保存</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="hideModal">关闭</a-button>
                </template>
            </a-modal>
            <a-modal ref="office-modal" :visible="officeModal" lg hide-footer title="部门选择" @cancel="hideOfficeModal" size="sm">
                <div style="height: 400px;overflow-y:scroll;">
                    <a-input-search style="margin-bottom: 8px" placeholder="部门名称" @change="onChange" />
                    <a-tree :expanded-keys="expandedOfficeKeys" :selected-keys="selectedOfficeKeys" :tree-data="officeTreeData" @expand="onOfficeExpand" @select="onOfficeSelect" :show-line="true" />
                </div>
                <template slot="footer">
                    <a-row>
                        <a-col :span="24" :style="{ textAlign: 'right' }">
                            <a-button type="primary" html-type="submit" @click="saveParentId">保存</a-button>
                            <a-button :style="{ marginLeft: '8px' }" @click="hideOfficeModal">关闭</a-button>
                        </a-col>
                    </a-row>
                </template>
            </a-modal>
        </nly-content>
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { FormInput, EditableCell } from "@/components/Form";
import { PageList, saveSysOffice, deleteSysOffice } from "@/api/office";
import * as moduleApi from "@/api/module";
import { constantRouterComponentsKeys } from "@/router/generator-routers";
import { listToMap } from "../../../utils/tool/map";
import { searchInTreeData } from "@/utils/tree";

const gData = [];
let keyMap = new Map();
// const dataList = [{key: 1, title: 1}, {key: 2, title: 2}, {key: 3, title: 3}];

/**
 * 数组转树形结构
 * @param list 源数组
 * @param tree 树
 * @param parentId 父ID
 */
const listToTree = (list, tree, parentId) => {
    list.forEach(item => {
        // 判断是否为父级菜单
        if (item.parentId === parentId) {
            let officeName = item.officeName;
            if (item.officeCode != null && item.officeCode.length > 0) {
                officeName = item.officeName + "(" + item.officeCode + ")";
            }
            const child = {
                ...item,
                key: item.id,
                title: officeName,
                children: []
            };
            // 迭代 list， 找到当前菜单相符合的所有子菜单
            listToTree(list, child.children, item.id);
            // 删掉不存在 children 值的属性
            if (child.children.length <= 0) {
                delete child.children;
            }
            // 加入到树中
            tree.push(child);
        }
    });
};

//获取父级key
const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some(item => item.key === key)) {
                parentKey = node.key;
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children);
            }
        }
    }
    return parentKey;
};
export default {
    props: {
        dataList: {
            type: Array,
            default: () => []
        }
    },
    components: {
        FormInput,
        EditableCell
    },
    data () {
        const columns = [
            {
                title: "部门名称",
                dataIndex: "officeName",
                key: "officeName",
                align: "left",
                width: 100
            },
            {
                title: "部门全称",
                dataIndex: "fullName",
                key: "fullName",
                width: 80
            },
            {
                title: "编码",
                dataIndex: "officeCode",
                key: "officeCode",
                align: "left",
                width: 80
            },
            {
                title: "排序",
                dataIndex: "treeSort",
                key: "treeSort",
                width: 80
            },
            {
                title: "备注",
                dataIndex: "remarks",
                key: "remarks",
                width: 80
            },
            {
                title: "更新时间",
                dataIndex: "updateDate",
                width: 80,
                key: "isShupdateDateow"
            },
            // {
            //     title: "操作",
            //     dataIndex: "o",
            //     width: 80,
            //     key: "o",
            //     customRender: (text, row, index) => {
            //         const { permissions } = this;
            //         return (
            //             <div class="row justify-content-md-center">
            //                 <span class="col"></span>
            //                 <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
            //                     {permissions.includes('office:edit') && !row.parentId == 0 ? (
            //                         <a
            //                             href="javascript:;"
            //                             title="编辑部门"
            //                             class="mr-1 col-1"
            //                             onClick={() => this.showModal(row)}
            //                         >
            //                             <i class="fa fa-edit" style="color: #69aa46;"></i>
            //                         </a>
            //                     ) : null}
            //                     {permissions.includes('office:delete') && !row.parentId == 0 && row.treeLeaf == 1 ? (
            //                         <a
            //                             href="javascript:;"
            //                             title="删除部门"
            //                             class="mr-1 "
            //                             onClick={() => this.deleteOffice(row)}
            //                         >
            //                             <i class="fa fa-trash-alt" style="color: #dd5a43;"></i>
            //                         </a>
            //                     ) : null}
            //                     {permissions.includes('office:add') ? <a
            //                         href="javascript:;"
            //                         title="添加下级部门"
            //                         class="mr-1 col-1"
            //                         onClick={() => this.addChildOffice(row)}
            //                     >
            //                         <i class="fa fa-plus-square"></i>
            //                     </a> : null}

            //                 </span>
            //                 <span class="col"></span>
            //             </div>
            //         );
            //     }
            // }
        ];

        return {
            upParentLabel: <span><span style="color:red;font-family: SimSun,sans-serif;">*</span>上级部门</span>,
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    this.tableKeys = selectedRowKeys;
                    this.tableRows = selectedRows;
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                },
                onSelect: (record, selected, selectedRows) => {
                    console.log(record, selected, selectedRows);
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    console.log(selected, selectedRows, changeRows);
                },
                columnWidth: 25,
            },
            tableKeys: [],
            tableRows: [],
            postData: {
                "page.current": 1,
                "page.size": 1000,
                officeName: ""
            },
            validateStatus: "success",
            errorMsg: null,
            officeType: "1",
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            parentName: "", //上级id
            parentId: [], //上级部门名称
            orgOfficeTreeData: [],         //原始部门数
            orgOfficeTreeDataKeys: [],     //原始部门数展开的key 
            officeTreeData: [],           //office tree数据
            expandedOfficeKeys: [],       //office tree默认展开的key
            selectedOfficeKeys: [],       //office tree默认选中的key
            leftOfficeTreeData: [],        //左边部门数 数据
            leftExpandedOfficeKeys: [],   //左边部门数 展开的key
            leftSelectedOfficeKeys: [],    //左边部门数 选中的key
            columns,
            form: this.$form.createForm(this, { name: "advanced_search" }),
            pagination: {
                defaultPageSize: 10,
                current: 1,
                pageSize: 10,
                total: 0,
                showTotal: total => `共 ${total} 条数据`,
                pageSizeOptions: ["10", "20", "30", "40", "50"],
                showLessItems: true
            },
            show: false, //是否显示弹窗
            editItem: {}, //新增/编辑对象
            TreeSortEditList: new Map(), //菜单排序修改集合
            tableExplandKey: [],
            editModal: false,
            officeModal: false,
        };
    },
    mounted () {
        this.PageList();
        this.treeData();
    },
    computed: {
        parentMenu: function () {
            const map = new Map();
            map.set(this.editItem.parentId, "");
            return map;
        },
        moudelsMap: function () {
            return listToMap(this.moduleList, {
                key: "moduleCode",
                value: "moduleName"
            });
        },
        componentSelectList: function () {
            const dataList = new Array();
            constantRouterComponentsKeys().forEach(item => {
                dataList.push({ key: item, title: item });
            });
            return dataList;
        },
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        //添加
        AddOffice () {
            this.editItem = {};
            this.parentId = [];
            this.parentName = "";
            this.editModal = true;
            this.form = this.$form.createForm(this, {});
        },
        //添加子部门
        addChildOffice (office) {
            this.parentId = [office.id];
            this.parentName = office.officeName;
            this.editItem = {};
            this.editModal = true;
        },
        //删除部门
        deleteOffice () {
            if (this.tableKeys.length != 1) {
                this.$message.warning('请选择一个部门');
                return;
            }
            if (this.tableRows[0].parentId == 0) {
                this.$message.warning('最顶级部门不能删除');
                return;
            }
            if (this.tableRows[0].treeLeaf != 1) {
                this.$message.warning('有下级部门不能删除');
                return;
            }
            let office = this.tableRows[0];
            let _this = this;
            this.$confirm({
                title: '提示',
                content: '您确定要删除该部门吗？',
                onOk () {
                    deleteSysOffice({ id: office.id, parentId: office.parentId })
                        .then(response => {
                            if (response.code === 200) {
                                _this.$message.success("删除成功");
                                _this.tableRows = [];
                                _this.tableKeys = [];
                                //刷新 列表
                                _this.PageList();
                                //刷新 tree
                                _this.treeData();
                            }
                        });
                },
                onCancel () {
                },
            });
        },
        //获取部门列表
        PageList () {
            const { postData } = this;
            PageList(postData)
                .then(response => {
                    console.log("获取部门列表", response);
                    if (response.code === 200) {
                        const { data } = response;
                        const childrenNav = [];
                        for (let i = 0; i < data.length; i++) {
                            const node = data[i];
                            const key = node.id;
                            const title = node.officeName;
                            keyMap.set(key, title);
                            this.tableExplandKey.push(key);
                        }
                        listToTree(data, childrenNav, data[0].parentId);
                        if (childrenNav.length == 0 && data.length > 0) {
                            console.log(data);
                            listToTree(data, childrenNav, data[0].parentId);
                        }

                        this.data = childrenNav;
                        console.log("childrenNav", childrenNav);
                    }
                })
                .catch(error => { });
        },
        //选择上级部门
        selectOffice () {
            // this.$refs["office-modal"].show();
            this.officeModal = true;
            this.treeData();
        },
        treeData () {
            PageList().then(response => {
                console.log("获取部门列表", response);
                if (response.code === 200) {
                    const { data } = response;
                    const childrenNav = [];
                    let keys = [];
                    for (let i = 0; i < data.length; i++) {
                        const node = data[i];
                        const key = node.id;
                        const title = node.officeName;
                        this.dataList.push({ key, title });
                        keys.push(key);
                        keyMap.set(key, title);
                    }
                    listToTree(data, childrenNav, 0);
                    this.orgOfficeTreeData = childrenNav;
                    this.orgOfficeTreeDataKeys = [...keys];
                    this.officeTreeData = childrenNav;
                    this.leftOfficeTreeData = childrenNav;
                    this.leftExpandedOfficeKeys = [...keys];
                    this.expandedOfficeKeys = keys;
                    console.log("parentId", this.parentId);
                    this.selectedOfficeKeys = this.parentId;
                }
            }).catch(error => { });
        },
        //部门保存
        handleSubmit (e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                let id = this.editItem.id;
                this.editItem = { ...values };
                this.editItem.id = id;
                this.editItem.parentId = this.parentId[0];
                console.log(this.editItem);
                if (this.parentName == null || this.parentName.length < 1) {
                    this.validateStatus = "error";
                    this.errorMsg = "父级部门不能为空";
                    return;
                }
                if (!err) {
                    saveSysOffice(this.editItem).then(response => {
                        if (response.code === 200) {
                            this.$message.success("保存成功");
                            //刷新 列表
                            this.PageList();
                            this.treeData();
                            this.hideModal();
                        }
                    }).catch(e => { });
                }
            });
        },
        //编辑部门
        showModal () {
            if (this.tableKeys.length != 1) {
                this.$message.warning('请选择一个部门');
                return;
            }
            if (this.tableRows[0].parentId == 0) {
                this.$message.warning('最顶级部门不能修改');
                return;
            }
            let editItem = this.tableRows[0];
            console.log("editItem", editItem);
            this.editItem = { ...editItem };
            this.parentId = [this.editItem.parentId];
            if (this.editItem.parentId == 0) {
                this.parentName = this.editItem.officeName;
            } else {
                this.parentName = keyMap.get(this.editItem.parentId);
            }
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        parentId: this.$form.createFormField({
                            value: this.parentName
                        }),
                        officeName: this.$form.createFormField({
                            value: this.editItem.officeName
                        }),
                        officeCode: this.$form.createFormField({
                            value: this.editItem.officeCode
                        }),
                        fullName: this.$form.createFormField({
                            value: this.editItem.fullName
                        }),
                        // officeType: this.$form.createFormField({
                        //     value: "" + this.editItem.officeType + ""
                        // }),
                        treeSort: this.$form.createFormField({
                            value: this.editItem.treeSort
                        }),
                        leader: this.$form.createFormField({
                            value: this.editItem.leader
                        }),
                        phone: this.$form.createFormField({
                            value: this.editItem.phone
                        }),
                        address: this.$form.createFormField({
                            value: this.editItem.address
                        }),
                        zipCode: this.$form.createFormField({
                            value: this.editItem.zipCode
                        }),
                        email: this.$form.createFormField({
                            value: this.editItem.email
                        }),
                        remarks: this.$form.createFormField({
                            value: this.editItem.remarks
                        })
                    };
                }
            });
            this.editModal = true;
        },
        hideModal () {
            this.editModal = false;
        },
        hideOfficeModal () {
            // this.$refs["office-modal"].hide();
            this.officeModal = false;
        },
        //保存部门父级id
        saveParentId () {
            // this.$refs["office-modal"].hide();
            this.officeModal = false;
            this.parentId = this.selectedOfficeKeys;
            this.parentName = keyMap.get(this.parentId[0]);
            if (this.parentName != null) {
                this.validateStatus = "success";
                this.errorMsg = null;
            }
        },
        onCellChange (item, dataIndex, editValue) {
            // if (item[dataIndex] != editValue) {
            //   const edit = { id: item.id, [dataIndex]: editValue };
            //   this.TreeSortEditList.set(item.id, edit);
            // } else {
            //   this.TreeSortEditList.delete(item.id);
            // }
            // console.log([...this.TreeSortEditList.values()]);
        },
        //查询条件重置
        reset () {
            this.postData = {
                "page.current": 1,
                "page.size": 1000,
                officeName: ""
            };
        },
        //表单重置
        handleReset () {
            this.form.resetFields();
        },
        onOfficeExpand (expandedOfficeKeys) {
            console.log("onExpand", expandedOfficeKeys);
            this.expandedOfficeKeys = expandedOfficeKeys;
            this.autoExpandParent = true;
        },
        onOfficeSelect (selectedOfficeKeys, info) {
            console.log("onSelect", info);
            this.selectedOfficeKeys = selectedOfficeKeys;
        },
        //弹窗部门树 搜索
        onChange (e) {
            const value = e.target.value;
            const expandedOfficeKeys = [];
            if (value) {
                const newTreeData = searchInTreeData(
                    expandedOfficeKeys,
                    this.officeTreeData,
                    "title",
                    value
                );
                Object.assign(this, {
                    officeTreeData: newTreeData,
                    expandedOfficeKeys,
                });
            } else {
                Object.assign(this, {
                    officeTreeData: this.orgOfficeTreeData,
                    expandedOfficeKeys: [...this.orgOfficeTreeDataKeys],
                });
            }

        },
        //左树 展开
        onLeftTreeExpand (expandedOfficeKeys) {
            console.log("onOfficeExpand", expandedOfficeKeys);
            this.leftExpandedOfficeKeys = expandedOfficeKeys;
            this.autoExpandParent = true;
        },
        //左树选择
        onLeftTreeSelect (key, info) {
            console.log(key, info);
            this.postData.parentId = key[0];
            this.PageList();
        },
        //左树搜索
        onLeftTreeChange (e) {
            //tree 搜索
            const value = e.target.value;
            const leftExpandedOfficeKeys = [];
            if (value) {
                const newTreeData = searchInTreeData(
                    leftExpandedOfficeKeys,
                    this.leftOfficeTreeData,
                    "title",
                    value
                );
                Object.assign(this, {
                    leftOfficeTreeData: newTreeData,
                    leftExpandedOfficeKeys,
                });
            } else {
                Object.assign(this, {
                    leftOfficeTreeData: this.orgOfficeTreeData,
                    leftExpandedOfficeKeys: [...this.orgOfficeTreeDataKeys],
                });
            }

        },
        //部门名称改变
        officeNameChange (val) {
            console.log(val.srcElement.value);
            if (!this.form.getFieldValue("fullName")) {
                this.form.setFieldsValue({
                    fullName: val.srcElement.value
                });
            }
        },
        showFunction () {
            this.show = !this.show;
        },
        onSelectChangeHandler: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        selectedRowKeysHandler: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows);
        },
    },
    watch: {}
};
</script>
<style scoped>
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }
    .ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 0px !important;
    }
</style>
<style lang="less">
    #components-form-demo-advanced-search {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
    }
    @import '~@/style/setting/inventory.less';
</style>

